<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    width="825px"
    :before-close="handleClose">
    <el-form ref="form" class="form flex-box" :rules="rules" :model="form" label-width="80px" label-position="top">
      <el-form-item id="deviceType" label="设备类型" prop="deviceType">
        <el-select v-model="form.deviceType" :disabled="type === 'edit'" @change="deviceTypeChange" placeholder="请选择">
          <el-option v-for="item in deviceTypeList" :label="item.attributeName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item id="deviceId" class="ml-20" prop="deviceId" label="设备名称">
        <el-select :disabled="!form.deviceType" v-model="form.deviceId" placeholder="请选择">
          <el-option v-for="item in deviceList" :label="item.deviceName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-button type="primary" plain icon="el-icon-circle-plus-outline"
               @click="addClick">新增
    </el-button>
    <el-form class="mt-20" ref="formTable" :rules="tableRules" :model="formTable">
      <el-table header-cell-class-name="table-header"
                :data="tableData" stripe
                style="width: 100%">
        <el-table-column
          prop="attributeName"
          label="属性"
        >
          <template slot-scope="{row}">
            <el-form-item  prop="attributeCode" v-if="row.editable">
              <el-select v-model="formTable.attributeCode" placeholder="请选择">
                <el-option v-for="item in attrList" :label="item.attributeName" :value="item.attributeCode"></el-option>
              </el-select>
            </el-form-item>
            <span v-else>{{row.attributeName}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="alarmConditionsName"
          label="运算符"
        >
          <template slot-scope="{row}">
            <el-form-item  prop="alarmConditions" v-if="row.editable">
              <el-select  v-model="formTable.alarmConditions"
                       placeholder="请选择">
              <el-option v-for="item in conditionList" :label="item.name" :value="item.key"></el-option>
            </el-select>
            </el-form-item>
            <span v-else>{{row.alarmConditionsName}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="attributeValue"
          label="阈值"
        >
          <template slot-scope="{row}">
            <el-form-item  v-if="row.editable" prop="attributeValue">
              <el-input type="number" v-model="formTable.attributeValue"></el-input>
            </el-form-item>
            <span v-else>{{row.attributeValue}}</span>

          </template>
        </el-table-column>
        <el-table-column
          prop="operate"
          label="操作"
        >
          <template slot-scope="{row,$index}">
            <div :style="{marginBottom:row.editable?'22px':'0'}">
              <el-button size="mini"
                         v-show="row.editable"
                         @click="formTableAdd($index)"
                         plain>保存
              </el-button>
              <el-button size="mini"
                         @click="formTableDel($index)"
                         type="danger" plain>删除
              </el-button>
            </div>

          </template>
        </el-table-column>
      </el-table>
    </el-form>


    <span slot="footer" v-if="['add','edit'].includes(type)" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleConfirm" :loading="loading">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
  import {getDeviceList,getAttrList,getConditionList,getDetail,} from "../../../api/platform/productdevicealarm";
  import {findName} from "../../../util/util";

  export default {
    name: 'add-alarm',
    props: {
      deviceTypeList: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        visible: false,
        loading:false,
        type: 'add',
        form: {
          deviceId:'',
          deviceType:''
        },
        formTable: {
          attributeCode:'',
          alarmConditions:'',
          attributeValue:'',
        },
        rules: {
          deviceType: [{required: true, message: '请选择设备类型'}],
          deviceId: [{required: true, message: '请选择设备名称'}],
        },
        tableRules: {
          attributeCode:[{required: true, message: '请选择属性'}],
          alarmConditions:[{required: true, message: '请选择条件'}],
          attributeValue:[{required: true, message: '请输入阈值'}],
        },
        tableData: [],
        deviceList: [],
        attrList:[],
        conditionList:[]
      }
    },
    computed: {
      title() {
        switch (this.type) {
          case "add":
            return '新增';
          case 'edit':
            return '编辑';
          case 'view':
            return '查看'
        }
      },
    },
    methods: {
      formTableDel(idx){
        this.tableData.splice(idx,1)
      },
      formTableAdd(idx){
        this.$refs.formTable.validate(valid=>{
          if(valid){
            Object.assign(this.tableData[idx],this.formTable)
            const data = this.tableData[idx]
            data.editable = false;
            this.$set(data,'alarmConditionsName',findName(this.formTable.alarmConditions,this.conditionList,'key','name'))
            this.$set(data,'attributeName', findName(this.formTable.attributeCode,this.attrList,'attributeCode','attributeName'))
          }
        })
      },
      deviceTypeChange(val) {
        getDeviceList(val).then(res => {
          this.deviceList = res.data.data || []
        })
        getAttrList(val).then(res=>{
          this.attrList = res.data.data;
        })
        if(this.type === 'add'){
          this.form.deviceId = ''
          this.tableData = []
        }
      },
      addClick() {
        this.tableData.push({
          alarmConditions: '',
          alarmConditionsName:'',
          attributeName: '',
          attributeCode: '',
          attributeValue: '',
          editable: true
        })
        this.$forceUpdate()
      },
      getConditionList(){
        getConditionList().then(res=>{
          this.conditionList = res.data.data;
        })
      },
      handleConfirm() {
        this.$refs.form.validate(valid=>{
          if(valid){
            const tableData = this.tableData.filter(o=>{return !o.editable})
            if(!tableData.length){
              this.$message.warning('请添加报警条件!')
              return
            }
            const data = {
              ...this.form,
              deviceName:findName(this.form.deviceId,this.deviceList,'id','deviceName'),
              deviceTypeName:findName(this.form.deviceType,this.deviceTypeList,'id','attributeName'),
              alarmConditionDTOList:tableData
            }
          this.loading = true
          if(this.type === 'add'){
            this.$emit('rowSave',data,this.handleClose)
          }else {
            this.$emit('rowUpdate',data,0,this.handleClose)
          }

          }
        })
      },

      handleClose() {
        this.loading = false
        this.visible = false
        this.from = {
          deviceId:'',
          deviceType:''
        }
        this.formTable = {
          attributeCode:'',
          alarmConditions:'',
          attributeValue:'',
        }
        this.$refs.form.resetFields()
      },
      showModal(row) {
        this.visible = true
        this.getConditionList()
        if(row){
          getDetail(row.id).then(res=>{
            res = res.data.data;
            this.form.deviceType = res.deviceType;
            this.form.deviceId = res.deviceId;
            this.form.id = res.id;
            this.tableData = res.productDeviceAlarmConditionVOS
            this.deviceTypeChange(this.form.deviceType)
          })
        }
      }
    }
  }
</script>
